<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .image-view{
            padding:20px;
            border:solid 1px rgb(56, 16, 16);
            width: 800px;
        }

        .image-view img{
            width: 100%;
        }
    </style>
</head>
<body>
    <button>来个看图神器</button>
    <button>下去吧</button>
    <hr>

    <div id="root"></div>

    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>

    <script type="text/babel">
        //创建虚拟 DOM 
        class Image extends React.Component{
            //1. 声明 state 属性 添加 src 属性
            state = {
                // src: 'https://source.unsplash.com/random/800x600'
                src: 'https://api.ixiaowai.cn/api/api.php'
            }
            render(){
                return <div className="image-view">
                    {/*2. 将 src 属性设置到图片中*/}
                    <img onClick={this.click} src={this.state.src} alt="" />    
                </div>;
            }

            //3. 绑定事件
            click = () => {
                this.setState({
                    // src: 'https://source.unsplash.com/random/800x600?t='+Date.now()
                    src: 'https://api.ixiaowai.cn/api/api.php?t='+Date.now()
                })
            }

            //组件挂载完毕后的回调  component 组件  Did 完成  mount 挂载   发送 AJAX  启动定时器一般都在这里书写
            componentDidMount(){
                console.log('componentDidMount 组件挂载完毕');
            }

            //在组件卸载之前执行的回调   component 组件  will 将要  unmount 卸载   回收资源, 清空定时器
            componentWillUnmount(){
                console.log('componentWillUnmount 组件即将卸载');
            }
        }
        

        //获取网页中 button
        let btns = document.querySelectorAll('button');

        btns[0].onclick = function(){
            //渲染 Image 组件
            ReactDOM.render(<Image />, document.querySelector("#root"));
        }

        btns[1].onclick = function(){
            //卸载 移除  unmount 卸载  component 组件  at 在  node 节点
            ReactDOM.unmountComponentAtNode(document.querySelector("#root"));
        }


    </script>


</body>
</html>